<template>
  <div class="flow-attr">
    <el-form label-position="left" class="flow-config-attr" label-width="100px">
      <el-form-item label="网关名称">
        <el-input v-model="_value.name" class="input-attr" />
      </el-form-item>
    </el-form>
    <RuleEdit
      ref="ruleRef"
      v-model="rule"
      :formItemList="data.formItemList"
      @confirm="handleRuleConfirm"
    />
  </div>
</template>

<script setup lang="ts" name="FlowConRule">
import { getRandNodeId } from "@/utils/process";
import { queryFormItemList } from "@/api/flow/form/";
import type { FormItemPerm } from "@/views/design/form/FormComponentMixin";
import type { Rule, RuleGroup } from "../ProcessNodes";
import RuleEdit from "./common/RuleEdit.vue";

const props = defineProps({
  taskIndex: Number,
  defFlow: Object
});

const _value: any = defineModel();
const ruleRef = ref(null);
const rule = reactive<Rule>({
  ruleCode: "",
  ruleType: "1",
  groupType: "0",
  groups: [] as RuleGroup[]
});

const data = reactive({
  formItemList: [] as FormItemPerm[]
});

const init = () => {
  console.log("onActivated", _value.value);
  if (!_value.value.props.ruleCode) {
    _value.value.props.ruleCode = getRandNodeId();
  }
  rule.ruleCode = _value.value.props.ruleCode;
  rule.groupType = _value.value.props.groupType;
  rule.groups = _value.value.props.groups;
  queryFormFieldData();
};

const queryFormFieldData = () => {
  queryFormItemList(props.defFlow.formId).then(res => {
    if (res.code === 200) {
      data.formItemList = res.data;
    } else {
      data.formItemList = [];
    }
  });
};

const handleRuleConfirm = rule => {
  console.log("confirm", rule);
  _value.value.props.groupType = rule.groupType;
  _value.value.props.groups = rule.groups;
};

watchEffect(() => {
  init();
});
</script>

<style lang="scss" scoped>
@use "@/assets/style/design/flow-attr.scss";
</style>
